
<template>
  <div class="dx-detail-container">
    <div
      v-if="region === 'super'"
      style="height: 50px; width: 100%; margin-top: 15px"
    >
      <el-input
        placeholder="根据名称检索"
        v-model="input3"
        @input="inputChange"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="inputChange"
        ></el-button>
      </el-input>
    </div>
    <div v-if="region === 'super'" class="dx-body-container">
      <div class="list-container add-form-btn" @click="addNewData">
        <i class="el-icon-circle-plus"></i>
      </div>

      <div
        v-for="(item, index) in tableList"
        :key="item.id"
        class="list-container"
      >
        <div>
          <label style="margin-right: 10px">{{ index + 1 }} </label>
          <span class="data-name">{{ item.name }}</span>
        </div>
        <div style="text-align: right; width: 100px" class="list-line-icon">
          <i class="el-icon-view" @click="lookdetail(item)"></i>
          <i class="el-icon-edit" @click="editdetail(item)"></i>
          <i class="el-icon-delete" @click="delTheData(item.id)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataOptions from "./dataOptions";
import Pagination from "@/components/Pagination/index.vue";

import { mapState } from "vuex";
import { getUserlist, deleteUser } from "../../api/user";
import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";
import { getToken,  getRole } from '@/utils/auth' // get token from cookie
export default {
  name: "DataDisplay",
  inject: ["upDataDetailId"],
  computed: {
    ...mapState({
      userListChange: (state) => state.app.userListChange, // threejs 开启关闭
    }),
  },
  data() {
    return {
      proData: "",
      tableList: [],
      parameters: {
        page: 1,
        total: 60,
        limit: 20,
      },
      input3: "",
      region: getRole(),
    };
  },
  components: {
    Pagination,
  },
  created() {
    this.initDisplayPage();
  },
  methods: {
    initDisplayPage() {
      const query = this.$route.query.type || null;
      this.proData = DataOptions.fieldlabel[query];
      this.menuType = this.proData.usName;
      // 设置页数
      this.parameters.total = this.proData["total"] || 0;
      // 初始化数据
      this.getData();
    },
    getData() {
      getUserlist().then((resp) => {
        this.tableList = resp.map((item) => {
          return { ...item, id: item.eventID };
        });
        console.log(' this.tableList=',  this.tableList)
      });
    },
    addNewData() {
      this.upDataDetailId({
        id: "0",
        type: "form",
      });
    },
    lookdetail(data) {
      this.upDataDetailId({
        id: data.id,
        type: "detial",
        data: data,
      });
    },
    editdetail(data) {
      this.upDataDetailId({
        id: data.id,
        type: "form",
        data: data,
      });
    },
    // 新增管理人员
    addAdmin() {
      this.$router.push({
        path: `/system/theSystem/systemForm/${this.proData.usName}/add`,
      });
    },
    closeContainer() {
      this.$router.go(-1);
    },
    handleClick(row) {},
    delTheData(id) {
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // const obj = {
          //   eventid: [id],
          // };
          deleteUser([id]).then((resp) => {
            this.$message({
              type: "success",
              message: "请求已发出，删除成功!",
            });

            const index = this.tableList.findIndex((item) => item.id === id);
            this.tableList.splice(index, 1);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 处理数据
    settableList() {
      const s = (this.parameters.page - 1) * this.parameters.limit + 0;
      const e =
        (this.parameters.page - 1) * this.parameters.limit +
        this.parameters.limit;
      this.tableList = DataOptions[this.proData.usName].slice(s, e);
    },
    // 输入框
    inputChange() {
      if (this.input3) {
        this.tableList = DataOptions[this.proData.usName].filter((item) =>
          item.name.includes(this.input3)
        );
      } else {
        this.settableList();
      }
    },
    // 切换分页
    changePagination(data) {
      this.parameters.page = data.page;
      this.settableList();
    },
    // 加载模型并飞入
    flyTo(data) {
      DxCommonUtils.cameraFlyTo({
        x: data.coordinates[0],
        y: data.coordinates[1],
        z: 12000,
      });
      DxCommonUtils.createModel(
        "http://106.12.254.129:39895/data/models3D/Cesium_Air.glb",
        {
          x: data.coordinates[0],
          y: data.coordinates[1],
          z: 200,
        }
      );
    },
  },
  watch: {
    userListChange() {
      console.log("userListChange改变了");
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.list-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}
.list-line-icon {
  width: 48px;
}
.promotion-all {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.pdf-body {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  width: 100vw;
  height: 100vh;
  z-index: 4000;
  background-color: #817d7d;
  overflow: auto;
  padding: 15px;
  // span {
  //   display: block;
  //   width: 50%;
  // }
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .pdf-body-cooper {
    position: fixed;
    top: 0;
    left: 0;
  }
  .pdf-color {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 20px;
  }
}
.add-form-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-form-btn > i {
  font-size: 24px;
}
</style>
<style>
.header-cooper .el-button--medium {
  padding: 6px;
}
.header-cooper .el-button {
  background: transparent;
  border-color: #dcdfe6;
  color: #fff;
  font-size: 20px;
}
.header-cooper .el-button.is-plain:hover,
.header-cooper .el-button.is-plain:focus {
  /* background: #ffffff;
  border-color: #1890ff;
  color: #1890ff; */
  color: #fff;
  fill: #fff;
  background: #48b;
  border-color: #aef;
}
</style>
